<template>
  <div>
    <div class="game_active" v-if="gameinfo.activity">
      <div class="active_title">
        <img src="../../../assets/img/detail/ic_active.png" alt="" />
        <span>独家活动</span>
      </div>
      <ul class="active_box">
        <li class="active_list" v-for="(item, index) in gameinfo.activity" :key="index">
          <span class="list_title">{{item.title2}}</span>
          <span class="list_text">
            <span class="list_text_item">
              <span>{{item.title}}</span>
              <img v-if="item.is_newest === 1" src="../../../assets/img/detail/ic_discount.png" alt="">
            </span>
          </span>
          <img class="list_right" src="../../../assets/img/detail/bt_right.png" alt="">
        </li>
      </ul>
    </div>
    <img v-else class="active_jynone" src="../../../assets/img/detail/jy_none1.png" alt="">
  </div>
</template>

<script>
export default {
  props: {
    gameinfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
}
</script>

<style lang="less" scoped>
.game_active {
  box-sizing: border-box;
  width: 9.2rem;
  margin: .266667rem .4rem 2.666667rem;
  padding: .266667rem .266667rem 0;
  height: auto;
  background: #ffffff;
  border-radius: .213333rem;
  font-size: .32rem;
}

.active_title {
  font-size: 0.426667rem;
  font-weight: 700;
  color: #222222;
  line-height: 0.8rem;
}

.active_title img {
  width: .346667rem;
  height: .346667rem;
  margin-right: 0.133333rem;
}

.active_jynone {
  width: 8.666667rem;
  margin: .666667rem;
}

.active_box {
  width: 8.666667rem;
  height: auto;
  font-size: .32rem;
  color: #333333;
  .active_list {
    height: 1.066667rem;
    display: flex;
    align-items: center;
    .list_title {
      flex-shrink: 1;
      width: 1.6rem;
      height: .533333rem;
      background: #f0726d;
      border-radius: .266667rem;
      text-align: center;
      line-height: .533333rem;
      color: #fff;
      margin-right: .266667rem;
    }
    .list_text {
      flex-grow: 1;
      // width: 5.573333rem;
      // text-overflow: ellipsis;
      // overflow: hidden;
      // white-space: nowrap;
      .list_text_item {
        position: relative;
        img {
          position: absolute;
          width: .64rem;
          height: .4rem;
          top: -0.266667rem;
          right: -0.733333rem;
        }
      }
    }
    .list_right {
      flex-shrink: 1;
      width: .426667rem;
      height: .426667rem;
    }
  }
}
</style>